<template>
  <div class="app-container">
    <el-form :model="form">
      <el-row>
        <el-col v-if="this.$store.getters.role.store_id == 0" :span="12">
          <el-form-item label="选择店铺：" :label-width="formLabelWidth">
            <el-select v-model="form.store_id" placeholder="请选择店铺" style="width: 100%;" @change="selectStore">
              <el-option
                v-for="item in stores"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="this.$store.getters.role.store_id == 0 ? 12 : 24">
          <el-form-item label="选择分类：" :label-width="formLabelWidth">
            <el-select v-model="form.good_type_id" placeholder="请选择商品分类" style="width: 100%;">
              <el-option
                v-for="item in goodTypes"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="商品名称：" :label-width="formLabelWidth">
        <el-input v-model="form.title" minlength="2" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品描述：" :label-width="formLabelWidth">
        <el-input v-model="form.describe" placeholder="请输入商品描述" />
      </el-form-item>
      <el-form-item label="商品零售价：" :label-width="formLabelWidth">
        <el-input v-model="form.base_price" type="number" min="0" placeholder="请输入商品零售价（单位元）" />
      </el-form-item>
      <el-row v-for="item in grades" :key="item.value">
        <el-col :span="24">
          <el-form-item :label="item.label+'价格：'" :label-width="formLabelWidth">
            <el-input v-model="form.price[item.value]" type="number" min="0" placeholder="请输入价格（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="item in form.shares" :key="item.rela" v-if="share_type == 3 && share_method == 1">
        <el-col :span="24">
          <el-form-item :label="item.text + '：'" :label-width="formLabelWidth">
            <el-input v-model="item.radio" type="number" min="0" placeholder="请输入分享经济(单位元)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="订单指数：" :label-width="formLabelWidth">
        <el-input v-model="form.jgz" type="number" min="0" placeholder="请输入商品订单指数（单位元）" />
      </el-form-item>
      <el-form-item label="可分配到虹包：" :label-width="formLabelWidth">
        <el-input v-model="form.bonus_pool_one" type="number" min="0" placeholder="请输入商品可分配到虹包（单位元）" />
      </el-form-item>
      <el-form-item label="可分配到报单中心：" :label-width="formLabelWidth">
        <el-input v-model="form.bonus_pool_two" type="number" min="0" placeholder="请输入商品可分配到报单中心（单位元）" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="报单奖励 ：" :label-width="formLabelWidth">
            <el-input v-model="form.team_month" type="number" min="0" placeholder="请输入报单奖励（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分虹：" :label-width="formLabelWidth">
            <el-input v-model="form.team_year" type="number" min="0"  placeholder="请输入分虹（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="招商奖励：" :label-width="formLabelWidth">
            <el-input v-model="form.team_recommend" type="number" min="0" placeholder="请输入招商奖励（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教育培训基金：" :label-width="formLabelWidth">
            <el-input v-model="form.team_fund" type="number" min="0" placeholder="请输入教育培训基金（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="分润数额：" :label-width="formLabelWidth">
            <el-input v-model="form.share_money" type="number" min="0" placeholder="请输入商品分润数额（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品规格：" :label-width="formLabelWidth">
            <el-input v-model="form.sku" placeholder="请输入商品规格" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="抵扣积分上限：" :label-width="formLabelWidth">
            <el-input v-model="form.jf" type="number" min="0" placeholder="请输入此商品最多可抵扣的价格（单位元）" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设定成本：" :label-width="formLabelWidth">
            <el-input v-model="form.cost" type="number" min="0" max="99" placeholder="设定成本（单位元）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序比重：" :label-width="formLabelWidth">
            <el-input v-model="form.sort" type="number" min="0" placeholder="请输入排序比重" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品重量：" :label-width="formLabelWidth">
            <el-input v-model="form.weight" type="number" min="0" placeholder="请输入商品重量（单位克）" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="邮寄类型：" :label-width="formLabelWidth">
            <el-select v-model="form.is_delivery_fee" placeholder="请选择邮寄类型" style="width: 100%;">
              <el-option label="包邮" :value="1" />
              <el-option label="不包邮且分单" :value="2" />
              <el-option label="不包邮且此商品单独算一单" :value="3" />
              <el-option label="不包邮且商品只按照地区和重量计算" :value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分单：" :label-width="formLabelWidth">
            <el-input v-model="form.list_num" type="number" min="0" placeholder="请输入分单数" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="销售类型：" :label-width="formLabelWidth">
            <el-select v-model="form.sale_type" placeholder="请选择销售类型" style="width: 100%;">
              <el-option label="普通" :value="1" />
              <el-option label="热销" :value="2" />
              <el-option label="店长推荐" :value="3" />
              <el-option label="新品" :value="4" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分类状态：" :label-width="formLabelWidth">
            <el-radio-group v-model="form.status">
              <el-radio-button :label="1">上架</el-radio-button>
              <el-radio-button :label="2">下架</el-radio-button>
              <el-radio-button :label="3">售罄</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单品可得积分：" :label-width="formLabelWidth">
            <el-input v-model="form.jf_send" type="number" min="0" placeholder="请输入用户购买可得积分" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品封面：" :label-width="formLabelWidth">
            <image-handle
              type="good"
              :files="files"
              :sum="1"
              @returnFile="getFile"
            />

          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="商品详情：" :label-width="formLabelWidth">
        <Tinymce ref="editor" v-model="form.detail" :height="400" @input="getContent" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button @click="back">返 回</el-button>
      <el-button type="primary" @click="sure">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import ImageHandle from '@/components/Image'
import Tinymce from '@/components/Tinymce'
import { initHandle, handle, loadGood } from '@/api/good'
export default {
  name: 'RoleHandle',
  components: { ImageHandle, Tinymce },
  data() {
    return {
      form: {
        id: 'new',
        store_id: '',
        good_type_id: '',
        sale_type: '',
        title: '',
        cover: '',
        describe: '',
        detail: '',
        sku: '',
        base_price: '',
        weight: '',
        status: '1',
        jf: '',
        jf_send: '',
        cost: '',
        sort: '',
        is_delivery_fee: '',
        list_num: '',
        price: [],
        share_money: '',
        shares: [
          {'rela':''}
        ],
        jgz: '',
        bonus_pool_one: '',
        bonus_pool_two: '',
        team_month: '',
        team_year: '',
        team_recommend: '',
        team_fund: ''
      },
      formLabelWidth: '120px',
      stores: [],
      goodTypes: [],
      grades: [],
      files: [],
      share_type: 0,
      share_method: 0,
    }
  },

  mounted() {
    const id = this.$route.query.id
    if (id !== 'new') {
      this.form.id = id
      this.initHandle({ good_id: id }, 'init')
    } else {
      this.initHandle({}, 'init')
    }
  },

  methods: {
    initHandle(obj, type) {
      initHandle(obj).then(res => {
        if (res.code === 20002) {
          this.share_type = 0
          this.share_method = 0
          this.stores = res.data.data.stores
          this.goodTypes = res.data.data.good_types
          this.grades = res.data.data.grade
          this.form.price = []
          this.form.good_type_id = ''
          Message({
            message: res.data.info,
            type: 'error',
            duration: 2000
          })
          return
        }
        this.share_type = res.data.share_type
        this.share_method = res.data.share_method
        this.form.good_type_id = ''
        this.stores = res.data.stores
        this.goodTypes = res.data.good_types
        this.grades = res.data.grade
        this.form.shares = res.data.share
        this.form.price = []
        for (const index in this.grades) {
          this.form.price[index] = ''
        }
        if (this.form.id !== 'new' && type === 'init') {
          this.loadGood()
        }
      })
    },

    loadGood() {
      loadGood({ id: this.form.id }).then(res => {
        const good = res.data
        this.form.store_id = good.store_id
        this.form.good_type_id = good.good_type_id
        this.form.sale_type = good.sale_type
        this.form.title = good.title
        this.form.describe = good.describe
        this.form.detail = good.detail
        this.form.sku = good.sku
        this.form.base_price = good.base_price
        this.form.weight = good.weight
        this.form.status = good.status
        this.form.jf = good.jf
        this.form.jf_send = good.jf_send
        this.form.cost = good.cost
        this.form.sort = good.sort
        this.form.is_delivery_fee = good.is_delivery_fee
        this.form.list_num = good.list_num
        this.form.price = good.price
        this.form.share_money = good.share_money
        this.form.shares = good.shares
        this.form.jgz = good.jgz
        this.form.bonus_pool_one = good.bonus_pool_one
        this.form.bonus_pool_two = good.bonus_pool_two
        this.form.team_month = good.team_month
        this.form.team_year = good.team_year
        this.form.team_recommend = good.team_recommend
        this.form.team_fund = good.team_fund
        this.files = good.files
      })
    },

    getFile(file) {
      if (file.length === 0) {
        this.form.cover = ''
        return
      }
      this.form.cover = file[0].origin
    },

    getContent(content) {
      this.form.detail = content
    },

    selectStore() {
      this.initHandle({ store_id: this.form.store_id }, 'select')
    },

    sure() {
      handle(this.form).then(res => {
        Message({
          message: res.data.info,
          type: 'success',
          duration: 2000
        })
        this.$router.push({ path: '/good/list' })
      })
    },

    back() {
      this.$router.go(-1)
    }
  }
}
</script>
